<!-- 1.getHomeGoods请求的数据添加的已有的数组，用了数组解构再push-->
<template>
  <div id="home">
    <nav-bar id="nav-bar">
      <template v-slot:center>
        <div>购物街</div>
      </template>
    </nav-bar>
    <tab-control
        :titles="['流行', '新款', '精选']"
        @tabClick="tabClick"
        ref="tabControl1"
        v-show="isFixed"
        class="tab-control"/>
    <scroll ref="scroll"
            :probe-type="3"
            :pull-up-load="true"
            @pullingUp="loadMore"
            class="content"
            @scroll="contentScroll">
      <home-swiper :banners="banners" @swiperImgLoad="swiperImgLoad"/>
      <home-recommend :recommend="recommend"/>
      <home-feature/>
      <tab-control
          :titles="['流行', '新款', '精选']"
          @tabClick="tabClick"
          ref="tabControl2"/>
      <goods-list :goods="goods[currentType].list"/>
    </scroll>
    <back-top @click="backTop" v-show="isShowBackTop"/>
  </div>
</template>

<script>
  import HomeSwiper from "@/views/home/childcomps/HomeSwiper";
  import HomeRecommend from "@/views/home/childcomps/HomeRecommend";
  import HomeFeature from "@/views/home/childcomps/HomeFeature";

  import NavBar from "@/components/common/navbar/NavBar";
  import Scroll from "@/components/common/scroll/Scroll";
  import TabControl from "@/components/content/tabControl/TabControl";
  import GoodsList from "@/components/content/goods/GoodsList";
  // import BackTop from "@/components/common/backTop/BackTop";   抽进mixin

  import {getHomeMultidata, getHomeGoods} from "@/network/home";
  import {imgLoadMixin,backTopMixin} from "@/components/common/mixin";

  // import PubSub from 'pubsub-js'//引入PubSub       抽进mixin

  export default {
    name: "Home",
    components:{
      HomeSwiper,
      HomeRecommend,
      HomeFeature,
      NavBar,
      Scroll,
      TabControl,
      GoodsList,
      // BackTop,

    },
    mixins:[imgLoadMixin,backTopMixin],
    data(){
      return{
        banners:[],
        recommend:[],
        goods:{
          'pop':{page: 0, list:[]},
          'new':{page: 0, list:[]},
          'sell':{page: 0, list:[]},
        },
        currentType:'pop',
        totalType:['pop', 'new', 'sell'],
        offsetTop:0,
        isFixed:false,
        saveY:0,
      }
    },
    created() {
      // created只做简单的逻辑，如何请求数据包装在methods里面
      // 1.请求“轮播图”，"推荐"的数据
      this.getHomeMultidata()

      // 2.请求商品数据
      this.getHomeGoods('pop')
      this.getHomeGoods('new')
      this.getHomeGoods('sell')

    },
    mounted() {
      //此处原为图片加载的防抖函数，已被抽取到mixin
    },
          // 这两个函数貌似有点多余，vue3中直接在路由配置文件那里让路由保持活跃了，不用搞这么麻烦效果好像也行
          activated() {
            this.$refs.scroll.scrollTo(0,this.saveY)  //再进来home组件时直接跳到y值的距离
            this.$refs.scroll.refresh()
          },
          deactivated() {
            this.saveY = this.$refs.scroll.scroll.y   //离开home组件前把y值保存
          },
    methods:{
      /**
       *网络请求方法
       */
      getHomeMultidata(){
        getHomeMultidata().then(res => {
          this.banners = res.data.data.banner.list
          this.recommend = res.data.data.recommend.list
          // console.log(res)
        })
      },
      getHomeGoods(type){
        const page = this.goods[type].page + 1    //注意这个加1跟后面的加1是不一样的，这里的加1不会保存给上面的data
        getHomeGoods(type, page).then(res => {
          // console.log(res);
          // 两种数组合并方法
          this.goods[type].list.push(...res.data.data.list)
          // console.log(this.goods[type].list.concat(res.data.data.list))
          this.goods[type].page += 1              //保存到data里面
          //完成上拉加载更多
          //表明完成了这次的加载任务，要是不写下面代码，只能加载一次
          this.$refs.scroll.finishPullUp()

        })
      },

      /**
       *事件监听方法
       */
      //点击按钮切换对应的图片
      tabClick(index){
        this.currentType = this.totalType[index]
        this.$refs.tabControl1.currentIndex = index
        this.$refs.tabControl2.currentIndex = index
      },
      // 请求新的加载数据
      loadMore(){
        this.getHomeGoods(this.currentType)
      },
      //记录滚动时的位置
      contentScroll(position){
        // 1.判断BackTop是否显示
        this.isShow(position)

        // 2.决定tabControl是否吸顶(position:fixed)
        this.isFixed = (-position.y) > this.offsetTop
      },
      //检测轮播图是否加载，加载就获取顶部高度为tabControl服务
      swiperImgLoad() {
        this.offsetTop = this.$refs.tabControl2.$el.offsetTop
      }
    },
  }
</script>

<style scoped>
  #home{
    /*padding-top: 44px;*/
    height: 100vh;
    position: relative;
  }
  .content{
    /*height: calc(100% - 44px);  未解决：用这个决定滑动高度会出现瞬间跳过效果，没有过渡，而用绝对定位方式就不会*/
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    top: 44px;
    bottom: 49px;
  }
  #nav-bar{
    /*position: fixed;*/
    /*left: 0;*/
    /*right: 0;*/
    /*top: 0;*/
    /*z-index: 9;*/
    height: 44px;
    line-height: 44px;
    background-color: #50b7c1;
  }
  .tab-control {
    position: relative;
    z-index: 11;
    background-color: white;
  }

</style>